<!--
  文件名: register.vue
  描述: 这是一个注册界面，参考注册界面为迅雷云盘注册界面
  作者: 白紫铜
  创建日期: 2024-3-06
-->
<template>
<div id="register" style="text-align: center ;background-color: #000000">
  <el-container class="RegisterPlace">
    <el-aside class="aside" width="600px">
      <div style="text-align: right">
        <router-link to="./login">
        <el-button class="register-button">登录</el-button>
        </router-link>
      </div>
      <div style="margin-bottom: 20px"/>
      <span class="link-separator"></span>
        <el-form :model="form" ref="RegisterForm">
          <el-input
              class="username"
              v-model="username"
              placeholder="请输入用户名"
              clearable></el-input>
          <div v-if="!isUsernameValid" class="error-message">用户名长度必须在2到16个字符之间</div>
          <div style="margin-bottom: 20px"/>
          <el-input
              class="password"
              v-model="password"
              placeholder="请输入密码"
              type="password"
              show-password
              clearable></el-input>
          <div v-if="!isPasswordValid" class="error-message">密码长度必须在6到20个字符之间</div>
          <div style="margin-bottom: 20px"/>
          <el-input
              class="determine_password"
              v-model="determine_password"
              placeholder="请确认密码"
              type="password"
              show-password
              clearable></el-input>
          <div style="margin-bottom: 20px"/>
          <el-input
              class="email"
              v-model="email"
              placeholder="请输入邮箱"
              clearable></el-input>
          <div style="margin-bottom: 20px"/>
          <el-input
              class="captcha"
              v-model="captcha"
              placeholder="请输入验证码"
              clearable></el-input>
          <span class="link-separator"></span>
          <el-button
              class="captcha-button"
              @click="handleGetCaptcha"
              :disabled="waitingForCaptcha"
              :class="{'waiting': waitingForCaptcha}">
            {{waitingForCaptcha ? `${countdown}s后重新获取`:"获取验证码"}}</el-button>
          <div style="margin-bottom: 20px"/>
          <el-button class="login-button" @click="handleRegister" :disabled="!isPasswordValid||!isUsernameValid" @keyup.enter="handleRegister">注册</el-button>
        </el-form>
    </el-aside>
    <el-main class="main"><img style="width: 700px; height: 620px" :src="backgroundUrl" alt="background" /></el-main>
  </el-container>
</div>
</template>

<script>
import url from "@/assets/logo(1).png";
import background from "@/assets/background.png";
import axios from "axios";

export default {
  name : 'RegisterView',
  data(){
    return{
      username:"",
      password:"",
      email:"",
      determine_password:"",
      captcha:"",
      ShowUsernameForm:false,//控制表单显示和隐藏
      ShowTelephoneForm:true,
      form:{},//添加表单数据
      isUsernameLinkAlive:false,//新增状态，表示账号密码登录链接是否为激活状态
      isTelephoneLinkAlive:true,
      isRegisterFormValid:false,
      isEmailValid:false,
      waitingForCaptcha:false,
      countdown:60,
      isUsernameValid:true,
      isPasswordValid:true,
    }

  },
  computed: {
    url() {
      return url
    },
    backgroundUrl() {
      return background; // Add a computed property for the background image
    },
  },
  mounted() {
    document
        .querySelector("body")
        .setAttribute("style","background-color:#FAFAFA")
  },
  created() {
    const isAuthenticated=localStorage.getItem('token')
    if(isAuthenticated){
      this.$message("您已登录")
      this.$router.push({name:'HomePage'})
    }
  },
  methods:{
    ShowUsernameLoginPlace(){
      this.ShowUsernameForm=true       //显示当前链接表单
      this.ShowTelephoneForm=false     //关闭另一个链接表单
      this.isUsernameLinkAlive = true; // 点击链接时激活状态
      this.isTelephoneLinkAlive=false  //关闭另一个链接的激活状态
    },
    ShowTelephoneLoginPlace(){         //同上
      this.ShowTelephoneForm=true
      this.ShowUsernameForm=false
      this.isUsernameLinkAlive=false
      this.isTelephoneLinkAlive=true
    },
    handleRegister(){
      if(this.isRegisterFormValid){
        axios.post('http://47.113.225.21:1145/verifyCaptcha',{
          email: this.email,
          captcha: this.captcha,
        })
            .then(response=>{
              console.log(response.data)
              if(this.password!==this.determine_password){
                this.$message.error("两次输入的密码不一致");
              }
              else {
                axios.post("http://47.113.225.21:1145/register",{
                  email:this.email,
                  username:this.username,
                  password:this.password,
                  captcha:this.captcha//将正确的验证码发送到后端
                }).then(response=>{
                  this.$message.success("注册成功")
                  console.log("Perform register")
                  console.log(response.data)
                  this.$router.push({name:"LoginView"})
                })
                    .catch(error=>{
                      const errorMessage=error.response.data;
                      this.$message.error(errorMessage);
                    })
              }
            }).catch(error => {
          this.$message.error("验证码错误，请重新输入"+error);
        });
      }
      else {
        this.$message.error("请填写完整的注册信息")
      }
    },
    handleGetCaptcha(){
      if(this.isEmailValid){
        axios.post('http://47.113.225.21:1145/sendEmail', {
          email:this.email
        })
            .then(response=>{
              console.log(response.data);
            }).catch(error=>{
              console.error('ERROR:',error)
        })
        this.startCountdown()
        console.log("Perform captcha")

      }
      else {
        this.$message.error("请填写正确的邮箱格式")
      }
    },
    validateRegisterForm(){
      this.isRegisterFormValid=!!this.username && !!this.password && !!this.determine_password && !!this.email && !!this.captcha;
    },
    validateEMail(){
      const emailPattern = /\S+@\S+\.\S+/;
      this.isEmailValid=emailPattern.test(this.email);
    },
    validateUsername(){
      if(this.username.length!==0&&(this.username.length<2||this.username.length>16)){
        this.isUsernameValid=false;
      }
      else {
        this.isUsernameValid=true;
      }
    },
    validatePassword(){
      if(this.password.length!==0&&(this.password.length<6||this.password.length>20)){
        this.isPasswordValid=false;
      }
      else {
        this.isPasswordValid=true;
      }
    },
    startCountdown(){
      this.waitingForCaptcha=true
      let timer=setInterval(()=>{
        if(this.countdown>0){
          this.countdown--;
        }
        else {
          clearInterval(timer)
          this.resetCaptchaButton();
        }
      },1000)
    },
    resetCaptchaButton(){
      this.waitingForCaptcha=false
      this.countdown=60
    }
  },
  watch: {
    username(){
      this.validateRegisterForm()
      this.validateUsername()
    },
    password(){
      this.validateRegisterForm()
      this.validatePassword()
    },
    determine_password(){
      this.validateRegisterForm()
    },
    email(){
      this.validateRegisterForm()
      this.validateEMail()
    },
    captcha(){
      this.validateRegisterForm()
    }
  }
}
</script>

<style scoped>
.aside{
  background-color: #ffffff;
  height: 550px;
  width: 400px;
  margin-left: 300px;
  margin-top: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.link-separator{
  margin: 0 10px;
}
.register-button{
  font-size: 12px;
  clip-path: polygon(0% 0%,100% 0%,100% 100%,30% 100%);
  border-radius: 0;
  border: none;
  width: 80px;
  height: 40px;
  background-color : #303133;
  transition: color 0.3s ease,background-color 0.3s ease;
  color: #ffffff
}
.register-button:hover{
  background-color: #606266;
  color: #ffffff;
}
.username,
.password,
.email,
.determine_password{
  font-size: 14px;
  width: 300px;
  height: 40px;
}
.captcha{
  font-size: 14px;
  width: 190px;
  height: 40px;
}

.login-button{
  font-size: 16px;
  color: #ffffff;
  transition: color 0.3s ease,background-color 0.3s ease;
  background-color: #303133;
  border: none;
  border-radius: 0;
  height: 40px;
  width: 300px;
}
.login-button:hover{
  color: #ffffff;
  background-color: #606266;
}
.captcha-button{
  width: 90px;
  height: 40px;
  border-radius: 0;
  border: none;
  background-color: #303133;
  transition: 0.3s ease;
  color: #ffffff;
}
.captcha-button:hover{
  background-color : #606266;
  color: #ffffff;
}
:deep(.el-input__wrapper){
  border-radius: 0 !important;
  border-color: #303133 !important;
}
/* F12找到检查部分修改 */
:deep(.el-input){
  --el-border-color-hover :#303133 !important;
}
:deep(.el-input__inner:focus){
  border-color: #303133 !important;
}
:deep(.el-input__inner:after){
  border-color: #303133 !important;
}
:deep(.el-menu-item:hover){
  background-color: #F5F7FA !important;
}
:deep(.el-input__wrapper.is-focus){
  box-shadow: black;
}
:deep(.el-input){
  --el-input-focus-border: #303133;
  --el-input-focus-border-color: #303133;
}
.waiting{
  background-color: #acacac;
  cursor: not-allowed;
}
.error-message{
  color: #ff0800;
  font-size: 14px;
}
</style>